<div class="cm">
   <div class="consume-panel">
    <el-button  @click="addContact()" type="primary">添加</el-button>
    <!--表格查询-->

    <el-form :inline="true" :model="checkFormInline" class="demo-form-inline" style="float: right">
        <el-form-item label="合同编号：">
            <el-input v-model="checkFormInline.contractNumber" placeholder=" "></el-input>
        </el-form-item>
        <el-form-item label="合同协议：">
            <el-input v-model="checkFormInline.contractAgreemen" placeholder=" "></el-input>
        </el-form-item>
        <el-form-item label=" ">
        <el-button type="primary" @click="checkContract()">查询</el-button>
        </el-form-item>
    </el-form>
   </div>
    <div class="consume-panel">
    <!--表格数据-->
        <kf-table
                ref="baseTable"
                :data="tableData"
                one-screen
                :title="tl"
                border
                :close-on-click-modal="false"
                width="diawidth"
                top="50px"
                layout="total, sizes, prev, pager, next, jumper"
        >
            <el-table-column prop="contractNumber"  label="合同编号" >
            </el-table-column>
            <el-table-column prop="contractAgreemen" label="合同协议">
            </el-table-column>
            <el-table-column prop="agreementUnit" label="协议单位">
            </el-table-column>
            <el-table-column prop="agreementNumber" label="协议次数">
            </el-table-column>
            <el-table-column prop="residueDegree" label="剩余次数">
            </el-table-column>
            <el-table-column prop="startDate" label="起始日期">
            </el-table-column>
            <el-table-column prop="endDate" label="终止日期">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180px">
                <template scope="scope">
                    <el-button  @click="editContact(scope)" type="primary">修改</el-button>
                    <el-button  @click="delectContact(scope)" type="primary">删除</el-button>
                </template>
            </el-table-column>



            <!--模态框-添加合同-->
            <template slot="editForm">
                <el-form :inline="true" :model="addContractForm" ref="addContractForm" class="demo-form-inline">
                    <div>
                        <el-form-item label="合同编号" label-width="100px"  prop="contractNumber">
                            <el-input v-model="addContractForm.contractNumber"></el-input>
                        </el-form-item>
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="合同协议" label-width="100px" prop="contractAgreemen">
                                <el-input v-model="addContractForm.contractAgreemen"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="协议单位"label-width="120px" prop="agreementUnit">
                                <el-input v-model="addContractForm.agreementUnit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="协议次数" label-width="100px" prop="agreementNumber">
                                <el-input v-model="addContractForm.agreementNumber" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="剩余次数"label-width="120px" prop="residueDegree">
                                <el-input v-model="addContractForm.residueDegree"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="起始日期"label-width="100px" prop="startDate">
                                <el-date-picker
                                        v-model="addContractForm.startDate"
                                        align="right"
                                        type="date"
                                        placeholder="选择日期"
                                        :picker-options="pickerOptions1" style="width: 150px">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="终止日期" label-width="120px"  prop="endDate">
                                <el-date-picker
                                        v-model="addContractForm.endDate"
                                        align="right"
                                        type="date"
                                        placeholder="选择日期"
                                        :picker-options="pickerOptions1" style="width: 150px">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
            <template slot="formBtn">
                <el-button  @click="clear()">取 消</el-button>
                <el-button type="primary" @click="saveClick()">确定保存</el-button>
            </template>
        </kf-table>

</div>
</div>